<template>
  <!-- 跨越订单 -->
  <customContainer ref="customContainerRef" :config="config" />
</template>
<script lang='ts' setup>
import { ref, getCurrentInstance, computed, defineAsyncComponent } from 'vue'
import { Edit, Bottom, Delete } from '@element-plus/icons-vue'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'
import { transferList } from '@/api/expressManager/zy'

const customContainerRef = ref(null),
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const queryParams = ref({
  orderId: '',
  customerCode: '',
  pageSize: 10,
  pageNum: 1,
})
const cancellations = () => {}
const toups = () => {}
const acrossExport = () => {}
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  single.value = rows.length != 1
  multiple.value = !rows.length
  // idss.value = rows.map((item) => item.id)
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '跨域客户订单号',
            prop: 'orderId',
            option: {
              placeholder: '请输入跨域客户订单号',
              
            },
          },
          {
            type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              dictInfo: { dict: DictDirection.客户名称 },
            },
          },
        
        ],
        queryParams: queryParams.value,
      },
      btns: [
        {
          title: '跨越列表导出',
          type: 'success',
          icon: Edit,
          onclick: acrossExport,
        },
      
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          {
            label: '客户代码',
            prop: 'customerName',
            width: '100',
            align: 'center',
          },
          { label: '下单时间', align: 'center', prop: 'orderTime', width: '120' },
          { label: '跨域客户订单号',
            align: 'center',
            prop: 'orderId',
            width: '120',
          },
          { label: '运单号',
            align: 'center',
            prop: 'waybillNumber',
            width: '120',
          },
          { label: '服务方式', align: 'center', prop: 'serviceType', width: '120' },
          { label: '付款方式',
            align: 'center',
            prop: 'payMode',
          },
          { label: 'goodsType', align: 'center', prop: '品名类别', width: '120' },
          { label: 'count',
            align: 'center',
            prop: '总件数',
            width: '120',
          },
          { label: '总重量', align: 'center', prop: 'actualWeight', width: '120' },
          { label: '木架方式', align: 'center', prop: 'woodenFrame' },
          { label: '入库单号', align: 'center', prop: 'productCode', width: '100' },
          { label: '代收金额', align: 'center', prop: 'collectionAmount', width: '100' },

          { label: '保价值', align: 'center', prop: 'insuranceValue', width: '100' },
          { label: '回单份数', align: 'center', prop: 'receiptCount', width: '120' },
          { label: '是否预约取货', align: 'center', prop: 'dismantling' },
          { label: '创建时间', align: 'center', prop: 'createTime', width: '100' },
          { label: '货好时间', align: 'center', prop: 'goodsTime', width: '100' },
          { label: '是否撤单', align: 'center', prop: 'isDelete', width: '100' },
          {
            label: '操作',
            align: 'center',
            width: '120',
            fixed: 'right',
            showOverflowTooltip: false,
            render(h, params) {
              const buttons = [
                {
                  title: '撤单',
                  clickFun: cancellations,
                },
                {
                  title: '轨迹',
                  clickFun: toups,
                },
               
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleSelectionChange(rows)
          },
        },
      },
      api: transferList,
      customKey: 'express/mainBusiness/acrossOrder',
    }
  },
  set(val) {
    return val
  },
})
</script>